<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/header.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title title-color">学生当日签到情况列表</h1>
		</header>

		<div class="mui-content">
			
			<ul class="mui-table-view" id="ul_student_punch_list" style="margin-bottom: 10px;">
				<!-- <li class="btnOper mui-table-view-cell mui-media">
				    <img style="max-width: 80px; height: 80px;" class="mui-media-object mui-pull-left" src="../../images/1.jpg">
					<span id="span_nickname" class="mui-pull-right">
						<p style="font-weight: bold; color: red; line-height: 120px; margin-right: 5px;">未打卡</p>
					</span>
				    <div class="mui-media-body">
						<div>
							<label>学号：2017211751</label>
						</div>
						<div>
							<label>姓名：汤倩</label>
						</div>
						<div>
							<label>班级：空间17</label>
						</div>

						<div>
							<label>打卡位置：江苏省南京市</label>
						</div>
				    </div>
					<div>
						<label>实习公司：华苏科技有限公司</label>
					</div>
					<div>
						<label>公司地址：江苏省南京市</label>
					</div>
				</li> -->
			</ul>

		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript">
			mui.init()

			mui.plusReady(function() {
				var user = app.getGlobalUserInfo();
				
				loadStudentPunchInfo();
				
			});
			
			// 加载学生打卡信息
			function loadStudentPunchInfo(){
				var teacher = app.getGlobalUserInfo();
				
				mui.ajax(app.serverUrl + "/user/teacher/query_student_punch_info?user_id=" + teacher.user_id, {
					data: {},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						if (data.status == 200) {
							var studentPunchInfoList = data.data;
							
							var ul_student_punch_list = document.getElementById("ul_student_punch_list");
							
							if (studentPunchInfoList != null && studentPunchInfoList.length > 0) {
								var student_punch_html_list = "";
								for (var i = 0; i < studentPunchInfoList.length; i++) {
									student_punch_html_list += studentPunchHtmlList(studentPunchInfoList[i]);
								}
								ul_student_punch_list.innerHTML = student_punch_html_list;
							} else {
								ul_student_punch_list.innerHTML = "";
							}
							
						} else {
							app.showToast("获取数据失败，请重试！", "error");
						}
					}
				});
				
			}
			
			// 学生打卡信息列表HTML 
			function studentPunchHtmlList(studentPunchInfo) {
				var html = "";
				var e_name = "暂无";
				var e_address = "暂无";
				var is_Punch = '<p style="font-weight: bold; color: red; line-height: 60px; margin-right: 5px;">未打卡</p>';;
				var punch_detail = "";
				if (studentPunchInfo.e_name != null) {
					e_name = studentPunchInfo.e_name;
					e_address = studentPunchInfo.e_address;
				}
				if (studentPunchInfo.q_count != null) {
					is_Punch = '<p style="font-weight: bold; color: green; line-height: 60px; margin-right: 5px;">已打卡</p>';
					punch_detail = '<div>' +
									   '<label>打卡位置：' + studentPunchInfo.currentAddress + '</label>' +
								   '</div>' +
								   '<div>' +
									   '<label>经度：' + studentPunchInfo.longitude + '</label>' +
								   '</div>' +
								   '<div>' +
									   '<label>纬度：' + studentPunchInfo.latitude + '</label>' +
								   '</div>';
				}
				html = '<li class="btnOper mui-table-view-cell mui-media">' +
							'<img style="max-width: 60px; height: 60px;" class="mui-media-object mui-pull-left" src="' + app.imgServerUrl + studentPunchInfo.head_portrait_url_small + '">' +
							'<span id="span_nickname" class="mui-pull-right">' +
								is_Punch +
							'</span>' +
							'<div class="mui-media-body">' +
								'<div>' +
									'<label>学号：' + studentPunchInfo.student_id + '</label>' +
								'</div>' +
								'<div>' +
									'<label>姓名：' + studentPunchInfo.name + '</label>' +
								'</div>' +
								'<div>' +
									'<label>班级：' + studentPunchInfo.class_name + '</label>' +
								'</div>' +
							'</div>' +
							'<div>' +
								'<label>实习公司：' + e_name + '</label>' +
							'</div>' +
							'<div>' +
								'<label>实习公司地址：' + e_address + '</label>' +
							'</div>' +
							punch_detail +
						'</li>';
				return html;
			}
		</script>
	</body>

</html>